<template>
<div>
    <el-button type="primary" @click="centerDialogVisible = true" >添加</el-button>
    <el-dialog title="添加用户" :visible.sync="centerDialogVisible" width="30%" center>
        <el-form :model="form" ref="form" label-width="40px">
            <el-form-item label="姓名">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="form.date" autocomplete="off"></el-input>

            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveUser">确 定</el-button>
        </span>
    </el-dialog>

    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="180">
        </el-table-column>
        <el-table-column prop="uname" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="ucreatetime" label="加入时间" width="230">
        </el-table-column>
        <el-table-column prop="age" label="年龄">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="修改用户" :visible.sync="dialogEditgsVisible" width="30%" center>
        <el-form :model="editForm" ref="editForm">
            <el-form-item label="编号">
                <el-input v-model="editForm.id" disabled autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="editForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model.number="editForm.age"></el-input>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogEditgsVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveEditForm('editForm')">更 新</el-button>
        </div>
    </el-dialog>

    <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
            :page-sizes="[10, 20, 40,100]" :page-size="pageSize" layout="total, sizes,prev, pager, next" :total="total"
            prev-text="上一页" next-text="下一页">
        </el-pagination>
    </div>

</div>

</template>

<script>
// import axios from 'axios'
// import Qs from 'qs'

export default {
  name: 'app',
  data () {
    return {
      name: '',
      pageNum: 1, // 默认显示页面为1
      pageSize: 10, //   每页的数据条数
      tableData: [], // 需要data定义一些，tableData定义一个空数组，请求的数据都是存放这里面
      total: 0,
      centerDialogVisible: false,
      dialogEditgsVisible: false,
      form: {
        name: '',
        age: ''
      },
      editForm: {
        name: '',
        id: '',
        age: ''
      }
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    // saveUser () {
    //   this.centerDialogVisible = false
    //   this.$refs.form.validate((valid) => {
    //     if (valid) {
    //       this.logining = true
    //       this.$axios({
    //         method: 'post',
    //         url: 'http://localhost:8989/pgUser/saveUser', // 接口地址
    //         data: {
    //           uname: this.form.name, // 传接口参数
    //           age: Number(this.form.date)
    //         }
    //       })
    //         .then(response => {
    //           if (response.data.code === 200) {
    //             this.$message({
    //               showClose: true,
    //               message: response.data.msg,
    //               type: 'success'
    //             })
    //           } else {
    //             this.$message({
    //               showClose: true,
    //               message: response.data.msg,
    //               type: 'warning'
    //             })
    //           }
    //         })
    //         .catch(error => console.log(error, 'error')) // 失败的返回
    //       this.logining = false
    //     } else {
    //       console.log('error submit!')
    //       return false
    //     }
    //   })
    // },
    // getData () {
    //   // 直接迪调用，没有传页码，调用封装的api 分页查询数据
    //   axios.get('http://localhost:8989/pgUser/queryUserList').then(response => {
    //     console.log(response.data)
    //     this.tableData = response.data.list
    //     // this.total = response.data.length
    //     this.total = response.data.total
    //   }, response => {
    //     console.log('error')
    //   })
    // },
    saveUser () {
      this.centerDialogVisible = false
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.logining = true
          this.postRequest('/pgUser/saveUser', {
            uname: this.form.name, // 传接口参数
            age: Number(this.form.date)
          })
          // this.$axios({
          //   method: 'post',
          //   url: 'http://localhost:8989/pgUser/saveUser', // 接口地址
          //   data: {
          //     uname: this.form.name, // 传接口参数
          //     age: Number(this.form.date)
          //   }
          // })
            .then(response => {
              if (response.code === 200) {
                this.getData()
                // this.$message({
                //   showClose: true,
                //   message: response.data.msg,
                //   type: 'success'
                // })
              } else {
                this.$message({
                  showClose: true,
                  message: response.data.msg,
                  type: 'warning'
                })
              }
            })
            .catch(error => console.log(error, 'error')) // 失败的返回
          this.logining = false
        } else {
          console.log('error submit!')
          return false
        }
      })
    },
    getData () {
      // 直接迪调用，没有传页码，调用封装的api 分页查询数据
      this.postKeyValueRequest('/pgUser/queryUserList', {
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }).then(response => {
        console.log(response.data)
        this.tableData = response.data.list
        // this.total = response.data.length
        this.total = response.data.total
      }, response => {
        console.log('error')
      })
    },
    // 每页下拉显示数据
    handleSizeChange: function (size) {
      this.pageSize = size
      console.log(this.pageSize)
      this.getData()
    },
    // 点击第几页
    handleCurrentChange: function (pageNum) {
      this.pageNum = pageNum
      console.log(this.pageNum)
      this.getData()
    },
    // 点击编辑按钮，弹出编辑模态框
    handleEdit (index, row) {
      this.dialogEditgsVisible = true
      this.editForm.id = row.id
      this.editForm.name = row.uname
      this.editForm.age = row.age
    },
    // 更新编辑数据
    // saveEditForm (aaa) {
    //   this.$refs.editForm.validate((valid) => {
    //     if (valid) {
    //       this.logining = true
    //       this.$axios({
    //         method: 'post',
    //         url: 'http://localhost:8989/pgUser/editUser', // 接口地址
    //         data: {
    //           uname: this.editForm.name, // 传接口参数
    //           age: Number(this.editForm.age),
    //           id: this.editForm.id
    //         }
    //       })
    //         .then(response => {
    //           this.dialogEditgsVisible = false
    //           if (response.data.code === 200) {
    //             this.$message({
    //               showClose: true,
    //               message: response.data.msg,
    //               type: 'success'
    //             })
    //           } else {
    //             this.$message({
    //               showClose: true,
    //               message: response.data.msg,
    //               type: 'warning'
    //             })
    //           }
    //         })
    //         .catch(error => console.log(error, 'error')) // 失败的返回
    //       this.logining = false
    //     } else {
    //       console.log('error submit!')
    //       return false
    //     }
    //   })
    // },
    saveEditForm (aaa) {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.logining = true
          this.putRequest('pgUser/editUser', {
            uname: this.editForm.name, // 传接口参数
            age: Number(this.editForm.age),
            id: this.editForm.id
          })
          // this.$axios({
          //   method: 'post',
          //   url: 'http://localhost:8989/pgUser/editUser', // 接口地址
          //   data: {
          //     uname: this.editForm.name, // 传接口参数
          //     age: Number(this.editForm.age),
          //     id: this.editForm.id
          //   }
          // })
            .then(response => {
              this.dialogEditgsVisible = false
              if (response.code === 200) {
                this.getData()
                // this.$message({
                //   showClose: true,
                //   message: response.data.msg,
                //   type: 'success'
                // })
              } else {
                this.$message({
                  showClose: true,
                  message: response.data.msg,
                  type: 'warning'
                })
              }
            })
            .catch(error => console.log(error, 'error')) // 失败的返回
          this.logining = false
        } else {
          console.log('error submit!')
          return false
        }
      })
    },
    // 删除
    handleDelete (index, row) {
      // axios({
      //   method: 'POST',
      //   url: 'http://localhost:8989/pgUser/delUser', // 接口地址
      //   transformRequest: [function (data) {
      //   // 对 data 进行任意转换处理
      //     return Qs.stringify(data)
      //   }],
      //   headers: {
      //     'deviceCode': 'A95ZEF1-47B5-AC90BF3'
      //   },
      //   data: {
      //     id: row.id
      //   }
      // })
      this.deleteRequest('/pgUser/delUser/' + row.id)
        .then(response => {
          console.log(response)
          if (response.code === 200) {
            this.getData()
            // this.$message({
            //   showClose: true,
            //   message: response.msg,
            //   type: 'success'
            // })
          } else {
            this.$message({
              showClose: true,
              message: response.data.msg,
              type: 'warning'
            })
          }
          console.log(response, 'success')
        })
    }
    // handleDelete (index, row) {
    //   axios({
    //     method: 'POST',
    //     url: 'http://localhost:8989/pgUser/delUser', // 接口地址
    //     transformRequest: [function (data) {
    //     // 对 data 进行任意转换处理
    //       return Qs.stringify(data)
    //     }],
    //     headers: {
    //       'deviceCode': 'A95ZEF1-47B5-AC90BF3'
    //     },
    //     data: {
    //       id: row.id
    //     }
    //   })
    //     .then(response => {
    //       if (response.data.code === 200) {
    //         this.$message({
    //           showClose: true,
    //           message: response.data.msg,
    //           type: 'success'
    //         })
    //       } else {
    //         this.$message({
    //           showClose: true,
    //           message: response.data.msg,
    //           type: 'warning'
    //         })
    //       }
    //       console.log(response, 'success')
    //     })
    // }
  }
}
</script>
<style>
</style>
